<template>
    <div id="total">
      <div id="top">
        <div id="left">
          <div>
            <el-form-item id="zhidan" prop="bankName" label="患者姓名:">
              <el-input
              @blur="setData"
                v-model="searchData.bankName"
                placeholder="请输入患者姓名"
              />
            </el-form-item>
            <el-form-item id="zhidan" prop="bankName" label="挂号日期:">
              <el-date-picker
        v-model="searchData.startTime"
        type="date"
        placeholder="开始日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
      &nbsp;-&nbsp;
      <el-date-picker
        v-model="searchData.endTime"
        type="date"
        placeholder="结束日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
            </el-form-item>
          </div>
          <div id="require">
            <el-button type="primary" @click="returnFn()">查询</el-button>
          </div>
        </div>
      </div>
      <!-- 表单 -->
      <div id="bottom">
        <div id="form">
          <el-table
            :data="getNotTreatData"
            style="width: 100%"
            size="large"
          >
          <el-table-column  width="50" />
          <el-table-column type="index" align="center" prop="id" label="序号" width="100" />
            <el-table-column
              align="center"
              prop="patientBank.bankName"
              label="患者姓名"
              width="120"
            />
            <el-table-column
              align="center"
              prop="patientBank.sex"
              label="性别"
              width="140"
            />
            <el-table-column
              align="center"
              prop="patientBank.age"
              label="年龄"
              width="120"
            />
            <el-table-column
              align="center"
              prop="patientBank.phone"
              label="电话	"
              width="140"
            />
            <el-table-column
              align="center"
              prop="registeredTime"
              label="挂号时间"
              width="120"
            />
            <el-table-column
              align="center"
              prop="registeredType"
              label="挂号类型"
              width="120"
            />
           <el-table-column align="center" label="操作" width="160">
            <template #default="scope">
              
              <el-button
                id="BtnTow"
                type="primary"
              >
                立即就诊
              </el-button>
            </template>
          </el-table-column>
          </el-table>
        </div>
        <!-- 分页器 -->
        <div id="pager-wapper">
          <el-pagination
            id="paging"
            background
            layout="prev, pager, next"
            v-model:page-size="pageSize"
            :total="store.state.treatList.tableTotal"
            @current-change="pageChange"
          />
        </div>
      </div>
    </div>
  </template>
  <script setup lang="ts">
  import { ref, reactive, defineComponent, computed, onBeforeMount } from "vue";
  import { mapGetters, mapMutations, useStore } from "vuex";
  const store = useStore();
  // 默认展示数据
  // 展示默认数据
  const getNotTreatData = computed(
    mapGetters(["getNotTreatData"]).getNotTreatData.bind({
      $store: store,
    })
  );

  // 分页
  // 默认每页展示5项
  const pageSize = ref(5);
  const setNotTreatData = mapMutations([
      "setNotTreatData",
    ]).setNotTreatData.bind({
      $store: store,
    });
  onBeforeMount(() => {
    setNotTreatData({
      currentPage: 1,
      pageSize: pageSize.value,
    });
  });
  // 分页功能实现
  const pageChange = (currentPage: any) => {
    setNotTreatData({ currentPage: currentPage, pageSize: pageSize.value,});
  };
  
  // 查询患者名称输入框
  const searchData = reactive({
    bankName: null,
    startTime: null,
    endTime:null
  });
  const returnFn = () => {
    setNotTreatData({
      currentPage: 1,
      pageSize: pageSize.value,
    bankName:searchData.bankName,
      startTime:searchData.startTime,
      endTime:searchData.endTime
    });
  };

  //输入框为空时重新拿取数据
  const setData=computed(()=>{
    if(!searchData.bankName){
      setNotTreatData({
      currentPage: 1,
      pageSize: pageSize.value
    });
    }
  })
  </script>

  <style scoped>
  #top {
    display: flex;
    justify-content: space-between;
  }
  #left {
    display: flex;
    align-items: center;
    height: 50px;
    margin: 20px 0;
  }
  #left > div {
    margin-left: 20px;
  }
  
  #red {
    color: red;
  }
  
  #bottom {
    margin-top: 20px;
  }
  #pager-wapper > .el-pagination {
    margin-top: 20px;
    justify-content: center;
    align-items: center;
  }
  #zhidan {
    display: flex;
    margin-top: 20px;
     ;
  }
  #require {
    display: flex;
  }
  
  .el-form-item > div {
    display: flex;
  }
  </style>
  